<template>
  <div class="tableCate">
    <el-form :model="tableCateForm" :rules="tableCateRules" v-loading="tableCateLoading" label-width="125px" ref="tableCateRefs" class="tableCateCls">
      <el-form-item label="父级：" class="selectFormWidth100">
        <el-select v-model="tableCateForm.pId" placeholder="请选择" size="small">
          <el-option label="顶级菜单" :value="-99"></el-option>
          <el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称：" prop="name">
        <el-input v-model="tableCateForm.name" type="text" placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item label="分类图标：">
        <div class="upLoadPicBox">
          <div v-if="tableCateForm.image" class="pictrue">
            <el-image ref="tableCateLargePreView" class="imgHover" :src="$uploadURL(tableCateForm.image)" :preview-src-list="[$uploadURL(tableCateForm.image)]"></el-image>
            <div class="upload_cover_preview">
              <i @click.stop="largePreview('tableCateLargePreView')" class="iconfont icon-yanjing"></i>
              <i @click.stop="delLarge(2)" class="el-icon l-upload el-icon-delete"></i>
            </div>
          </div>
          <div v-else @click="modalPicTap('1')" class="upLoad"><i class="el-icon l-upload el-icon-camera-solid"></i></div>
        </div>
      </el-form-item>
      <el-form-item label="排序：" prop="sort">
        <el-input-number v-model="tableCateForm.sort" :min="1" :setp="1" placeholder="排序" @keydown.native="channelInputLimit" />
      </el-form-item>
      <el-form-item label="状态：">
        <el-radio-group v-model="tableCateForm.isShow">
          <el-radio :label="1">显示</el-radio>
          <el-radio :label="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="创建时间：" v-if="tableCateForm.createDateUTC">
        <el-input v-model="tableCateForm.createDateUTC" disabled type="text" placeholder="创建时间"></el-input>
      </el-form-item>
      <div class="subBtnWid">
        <el-button size="mini" type="primary" @click="subTableCate('tableCateRefs')" :loading="loadingBtn">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import {
    getAppointTableCateGroyApi,
    addCategroy as postAddTableCateApi,
    editCategroy as putEditTableCateApi,
  } from '@/api/cate';

  export default {
    name: 'tableCate',
    props: {
      pId: {
        type: [String, Number],
        default: -99
      },
      id: {
        type: [String, Number],
        default: 0
      },
      isEdit: {
        type: [String, Number],
        default: 0
      },
      cate: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        tableCateForm: {
          pId: this.pId ? this.pId : -99,
          name: '',
          image: '',
          sort: '',
          isShow: 1,
          createDateUTC: ''
        },
        tableCateRules: {
          name: [
            { required: true, message: '请填写分类名称', trigger: 'blur' }
          ]
        },
        tableCateLoading: false,
        loadingBtn: false
      }
    },
    mounted() {
      if (this.isEdit === 1) this.getAppointTableCate();
    },
    methods: {
      modalPicTap(num) {
        const _this = this;
        _this.$modalUpload(function(img) {
          _this.$set(_this.tableCateForm, 'image', img[0].path);
        }, num, 'store');
      },
      /**
       * 提交
       */
      subTableCate(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$set(this, 'loadingBtn', true);
            if (this.isEdit === 1 && this.id) {
              putEditTableCateApi({
                pId: this.tableCateForm.pId === -99 ? 0 : this.tableCateForm.pId,
                name: this.tableCateForm.name,
                image: this.tableCateForm.image,
                sort: this.tableCateForm.sort,
                isShow: this.tableCateForm.isShow
              }, this.id).then(res => {
                this.$message.success('编辑成功');
                this.$emit('getTableCate');
                this.$emit('close');
                this.$set(this, 'loadingBtn', false);
              }).catch(() => {
                this.$set(this, 'loadingBtn', false);
              });
            } else {
              postAddTableCateApi({
                pId: this.tableCateForm.pId === -99 ? 0 : this.tableCateForm.pId,
                name: this.tableCateForm.name,
                image: this.tableCateForm.image,
                sort: this.tableCateForm.sort,
                isShow: this.tableCateForm.isShow
              }).then(() => {
                this.$message.success('新增成功');
                this.$emit('getTableCate');
                this.$emit('close');
                this.$set(this, 'loadingBtn', false);
              }).catch(() => {
                this.$set(this, 'loadingBtn', false);
              });
            };
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      /**
       * 获取指定的分类信息
       */
      getAppointTableCate() {
        this.$set(this, 'tableCateLoading', true);
        getAppointTableCateGroyApi(this.id).then(res => {
          console.log('获取指定的分类信息', res);
          this.$set(this, 'tableCateForm', {
            pId: res.pId === 0 ? -99 : res.pId,
            name: res.name,
            image: res.image,
            sort: res.sort,
            isShow: res.isShow,
            createDateUTC: this.$util.uctTimeFileter(res.createDateUTC)
          });
          this.$set(this, 'tableCateLoading', false);
        }).catch(() => {
          this.$set(this, 'tableCateLoading', false);
        });
      },
      /**
       * 删除图片
       */
      delLarge() {
        this.$set(this.tableCateForm, 'image', '');
      },
      /**
       * 大图预览
       * @param ref
       */
      largePreview(ref) {
        this.$refs[ref].clickHandler();
      },
      channelInputLimit(e) {
        const key = e.key
        if (key === 'e' || key === '.') {
          e.returnValue = false
          return false
        }
        return true
      }
    }
  }
</script>

<style scoped>

</style>
